<template>
    <div class="foodManage">
        <CommonTabs :tabList="tabList" v-model="activeName"></CommonTabs>
        <div class="foodManageContent">
            <div class="search">
                <el-form :model="searchForm" label-width="80px" :inline="true" ref="form">
                    <!-- <el-form-item prop="name" label="物品名称">
                        <CommonInput v-model="searchForm.name" :placeholder="'请输入物品名称'"></CommonInput>
                    </el-form-item> -->



                </el-form>
            </div>
            <CommonTable :columns="inventoryManageColumns" :table-data="tableData" :pagination="pagination"
                style="flex: 1">
                <!-- <template #img="{ row }">
                    <el-image style="width: 100px; height: 100px" :src="assetsUrl + row.imageUrl"
                        :preview-src-list="[assetsUrl + row.imageUrl]" :fit="'fill'"></el-image>
                </template> -->
                <template #status="{ row }">
                    <el-tag v-if="row.status == 1" type="success">已通过</el-tag>
                    <el-tag v-else-if="row.status == 2" type="danger">已拒绝</el-tag>
                    <el-tag v-else-if="row.status == 0" type="info">待审批</el-tag>

                </template>
                <template #edit="{ row }">
                    <el-button type="text" class="del" @click="handleApply(row, 1)">同意申请</el-button>
                    <el-button type="text" class="del" @click="handleApply(row, 2)">拒绝申请</el-button>
                </template>
            </CommonTable>
        </div>

    </div>
</template>

<script>
import { inventoryManageColumns } from "./columns"

import utils from "@/utils/index"
// 接口
import { getTablePage, handleApply } from "@/api/join"
export default {
    components: {
    },
    data() {
        return {
            inventoryManageColumns,
            name: '',
            assetsUrl: '',
            searchForm: {
                name: '',
                category: '',
            },
            tableData: [

            ],
            // 分页器信息
            pagination: {
                pageNum: 1,
                pageSize: 10,
                total: 10,
            },
            tabList: [
                {
                    label: '入驻管理',
                    name: 'joinManage',
                }
            ],
            activeName: 'joinManage',
            changeDialogShow: false,
            tableData: [],

        };
    },

    mounted() {
        this.getTableData()
    },

    methods: {
        async handleApply(row, flag) {
            let data = {
                id: row.id,
                status: flag,
                reason: '12'
            }
            let res = null
            if (flag == 1) {
                //同意申请
                res = await handleApply(data)
            } else {
                //拒绝申请
                res = await handleApply(data)

            }
            console.log(res, 'zz');
            if (res.code == 200) {
                this.$message.success('已处理申请！')
                this.getTableData()
            } 

        },
        async getTableData() {
            let data = {
                page: {
                    ...this.pagination
                },
                param: {
                    name: this.searchForm.name,
                    category: this.searchForm.category,
                }
            }
            const res = await getTablePage(data)
            console.log(res.data, 'rr');
            this.tableData = res.data

        },

        handleSearch() {
            this.getTableData()
        },
        handleReset() {
            this.$refs.form.resetFields();
            this.getTableData()
        }
    },
};
</script>

<style lang="less" scoped>
.foodManage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .foodManageContent {
        flex: 1;
        display: flex;
        flex-direction: column;

        .ing {
            color: rgb(34, 202, 104);
        }

        .stop {
            color: #e75511;
        }

        .row-img {
            width: 100px;
            height: 100px;

        }

        .title {
            line-height: 25px;
            padding: 16px 0 12px 0;
            text-align: center;
            font-size: 18px;
            font-weight: bolder;
        }

        .search {
            padding: 0 24px;

            .el-button {
                width: 74px;
                height: 32px;
                padding: 0;
                text-align: center;
                background: #155bd4;
                border-radius: 2px;
                border: 1px solid #dcdee0;
                color: #fff;

                span {
                    line-height: 32px;
                }

                &:hover {
                    // color: #155bd4;
                    // background: #edf4ff;
                    border: 1px solid #155bd4;
                }
            }
        }

        ::v-deep {
            .el-pagination {
                display: none;
            }
        }

        .el-table__row {
            .activeText {
                cursor: pointer;
                // color: var(--active-text-color);
            }
        }
    }
}
</style>